<template>
  <div class="backend-detail">
    <div class="detail-info"
      :style="{ width: indentDetail.status == 0 || indentDetail.status == 1 || indentDetail.status == 4 ? '' : '100%' }">
      <div class="detail-main" v-loading="loading">
        <div class="main-header common-padding">
          宣讲订单详情
          <el-button type="primary" @click="goList">返回列表</el-button>
        </div>
        <el-tabs class="common-padding" v-model="activeName">
          <el-tab-pane label="基本信息" name="info"></el-tab-pane>
          <el-tab-pane v-if="indentDetail.status == 1" label="评价列表" name="list"></el-tab-pane>
        </el-tabs>
        <div class="scroll-main">
          <el-scrollbar view-style="padding: 0 20px;" height="100%">
            <template v-if="activeName == 'info'">
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">课程名称：</el-col>
                <el-col :span="21">{{ indentDetail.courseName }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">专家：</el-col>
                <el-col :span="21">{{ indentDetail.expertInfo.name }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">专家所在机构：</el-col>
                <el-col :span="21">{{ indentDetail.expertInfo.unit }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">专家职称：</el-col>
                <el-col :span="21">{{ indentDetail.expertInfo.expertTitle }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">预约时间：</el-col>
                <el-col :span="21">{{ format(indentDetail.appointTime) }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">预约时段：</el-col>
                <el-col :span="21">{{ indentDetail.timeType == 0 ? '上午' : '下午' }}</el-col>
              </el-row>
              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">位置：</el-col>
                <el-col :span="21">{{ indentDetail.location }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">听众人数：</el-col>
                <el-col :span="21">{{ indentDetail.listenerCount }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">联系人：</el-col>
                <el-col :span="21">{{ indentDetail.linkMan }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">联系人电话：</el-col>
                <el-col :span="21">{{ indentDetail.linkManTel }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">预约状态：</el-col>
                <el-col :span="21">{{ statusCalc }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">审核状态：</el-col>
                <el-col :span="21">{{ indentDetail.auditStatus == 0 ? '待审核' : indentDetail.auditStatus == 1 ? '审核通过' :
                  indentDetail.auditStatus == 2 ? '审核未通过' : '' }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">到场人数：</el-col>
                <el-col :span="21">{{ indentDetail.commingCount }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">评价人数：</el-col>
                <el-col :span="21">{{ indentDetail.evaluateCount }}</el-col>
              </el-row>

              <el-row class="detail-item">
                <el-col :span="3" class="detail-label">预约说明：</el-col>
                <el-col :span="21">{{ indentDetail.appointDescribe }}</el-col>
              </el-row>
            </template>
            <template v-if="activeName == 'list'">
              <div class="eav-list">
                <div v-for="(evaItem, evaIndex) in indentDetail.evaluates" :key="evaIndex" class="eva-item">
                  <img class="item-avator" src="@/assets/images/personal-center/default_avatar.png">
                  <div class="item-r">
                    <div class="item-header">
                      <div class="item-info">
                        <div class="name">{{ evaItem.name }}</div>
                        <!-- <div class="position">所在机构副教授</div> -->
                      </div>
                      <div class="scroe">
                        <div class="score-num">{{ evaItem.averageMark ? evaItem.averageMark.toFixed(2) : '' }}</div>
                        <div>综合评分</div>
                      </div>
                    </div>
                    <div class="eva-content">
                      <div class="content-title">
                        <span>评价时间：{{ moment(evaItem.createTime).format('YYYY-MM-DD HH:mm') }}</span>
                        <div @click="changeExpand(evaItem)">
                          <span>{{ evaItem.isExpand ? '收起' : '展开' }}评价细则</span>
                          <span :class="['icon', evaItem.isExpand ? 'open' : '']">
                            <el-icon>
                              <ArrowRightBold />
                            </el-icon>
                          </span>
                        </div>
                      </div>
                      <!--  -->
                      <el-collapse-transition>
                        <div v-show="evaItem.isExpand" :class="['content-main']">
                          <div v-for="(quesItem, quesIndex) in evaItem.evaluates" :key="quesIndex" class="ques-group">
                            <div class="ques-title" :style="{ width: quesItem.evaluateType == 1 ? '100%' : '' }">
                              {{ quesIndex + 1 }}.{{ quesItem.questions }}
                            </div>
                            <div v-if="quesItem.evaluateType != 1" class="mark-rate">
                              <el-rate disabled v-model="quesItem.mark" size="large" />
                              <div style="display: inline-block;height: 100%;vertical-align: text-bottom">{{ quesItem.mark
                              }}.0
                              </div>
                            </div>
                            <div v-else style="width: 100%;">
                              <div class="ques-opinion">{{ quesItem.content }}</div>
                            </div>
                          </div>
                        </div>
                      </el-collapse-transition>
                    </div>
                  </div>
                </div>
                <el-empty v-if="!indentDetail.evaluates || indentDetail.evaluates.length == 0" description="暂无数据" />
              </div>
            </template>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div v-if="indentDetail.status == 0 || indentDetail.status == 1 || indentDetail.status == 4" class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon>
                <More />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="indentDetail.status == 1" @click="modify">修改</el-dropdown-item>
                <el-dropdown-item v-if="indentDetail.status == 1" @click="cancelOrder">取消</el-dropdown-item>
                <el-dropdown-item v-if="(indentDetail.status == 0 || indentDetail.status == 4) && isFillingSystem"
                  @click="confirmOrder">确认</el-dropdown-item>
                <el-dropdown-item v-if="(indentDetail.status == 0 || indentDetail.status == 4) && isFillingSystem"
                  @click="rejectOrder">拒绝</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>
      <el-card v-if="indentDetail.status == 1" style="margin-top: 10px;">
        <template #header>
          <div class="card-header">
            <span>签到码</span>
          </div>
        </template>
        <div class="qr-code">
          <img v-if="indentDetail.status == 1" :src="`${systemStore.frontHost}/TpwpStatic${indentDetail.qRcodePath}`">
        </div>
      </el-card>
    </div>
  </div>
  <CourseAppointment :courseId="indentDetail.courseId" :expertId="indentDetail.expertId"
    :courseName="indentDetail.courseName" v-model:visible="reservationVis" type="expertModify" :orderId="indentDetail.id"
    @callback="getIndentDetail" />
</template>

<script>
export default { name: 'backendPublicizeIndentDetail' }
</script>

<script setup>
import { ref, computed } from 'vue';
import { More, ArrowRightBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import moment, { format } from '@/plugins/moment.js'
import CourseAppointment from '@/components/CourseAppointment.vue'
import { useAuthStore } from '@/stores/modules/auth.js';
import { useSystemStore } from '@/stores/modules/system.js';

const systemStore = useSystemStore()

/* 路由 */
const route = useRouter()

/* 用户信息 */
const authStore = useAuthStore()
const activeName = ref('info')

/* 当前用户是否为最高级的系统管理员 */
const isFillingSystem = computed(() => {
  let actions = authStore.userInfo.actions
  if (!actions) return
  const find = actions.find(item => item.id == '4')
  return find ? true : false
})


/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const indentDetail = ref({
  expertInfo: {},
  evaluates: [],
})

/* 获取详情内容 */
const getIndentDetail = () => {
  loading.value = true
  http.$GET("/PreachM/GetPreachOrderDetailById", { Id: route.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    indentDetail.value = res.result.order
    indentDetail.value.expertInfo = res.result.expert
    indentDetail.value.evaluates = res.result?.evaluates?.map(el => {
      el.isExpand = false
      return el
    }) || []
  }).finally(() => loading.value = false)
}

// 切换展开状态
const changeExpand = (evaItem) => {
  evaItem.isExpand = !evaItem.isExpand
}


const statusCalc = computed(() => {
  if (indentDetail.value.status == 0) return '待确认'
  if (indentDetail.value.status == 1) return '已确认'
  if (indentDetail.value.status == 2) return '已拒绝'
  if (indentDetail.value.status == 3) return '已取消'
  if (indentDetail.value.status == 4) return '待专家确认'
  if (indentDetail.value.status == 5) return '待企业确认'
  return ''
})

getIndentDetail()

// 修改订单
const reservationVis = ref(false)
const modify = () => {
  reservationVis.value = true
}
// 取消订单
const cancelOrder = () => {
  ElMessageBox.prompt('请输入取消理由', '取消', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputType: 'textarea',
    inputValidator: str => {
      if (!str) return '请输入取消理由'
      return true
    }
  }).then(({ value }) => {
    http.$POST('/PreachM/CancelPreachOrder', {
      orderId: indentDetail.value.id,
      appointDescribe: value
    }).then(res => {
      if (res.isError) return ElMessage.warning('提交失败')
      ElMessage.success(res.message)
      getIndentDetail()
    })
  }).catch(() => { })
}

const _ConfirmPreachOrder = (status, appointDescribe) => {
  loading.value = true
  return new Promise(resolve => {
    http.$POST('/PreachM/ConfirmPreachOrder', {
      orderId: indentDetail.value.id,
      status,
      appointDescribe,
      // 1:专家 2: 企业
      UserType: 1
    }).then(res => {
      if (res.isError) return
      getIndentDetail()
      resolve()
    }).finally(() => loading.value = false)
  })
}
// 同意修改订单
const confirmOrder = () => {
  ElMessageBox.confirm('是否确认通过修改？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(() => _ConfirmPreachOrder(1)).catch(() => { })
}

// 拒绝订单
const rejectOrder = () => {
  ElMessageBox.prompt('请输入拒绝理由', '拒绝', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputType: 'textarea',
    inputValidator: str => {
      if (!str) return '请输入拒绝理由'
      return true
    }
  }).then(({ value }) => {
    _ConfirmPreachOrder(2, value)
  }).catch(() => { })
}

/* 返回列表 */
const goList = () => {
  route.push({
    path: "/backend/publicize-indent",
    query: route.currentRoute.value.query.currentPage ? { currentPage: route.currentRoute.value.query.currentPage } : {}
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";

.detail-main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px 0;
  display: flex;
  flex-direction: column;

  .common-padding {
    padding: 0 20px;
  }

  .main-header {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
  }

  .scroll-main {
    width: 100%;
    flex: 1;
    height: 0;

    .eav-list {
      padding: 0 0 80px;

      .eva-item {
        padding: 22px 0 10px;
        border-bottom: 2px solid #EAEAEA;
        display: flex;
        gap: 14px;

        .item-avator {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
        }



        .item-r {
          flex: 1;
          width: 0;

          .item-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;

            .item-info {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .name {
                height: 100%;
                font-size: 23px;
                font-weight: 500;
                color: #212121;
              }

              .position {
                font-size: 16px;
                font-weight: 400;
                color: #515151;
              }
            }

            .scroe {
              font-size: 17px;
              font-weight: 400;
              color: #626262;
              display: flex;
              flex-direction: column;
              text-align: center;

              .score-num {
                font-size: 35px;
                font-weight: 600;
                color: #F0BB69;
              }
            }
          }

          .eva-content {
            font-size: 18px;
            font-weight: 400;

            .content-title {
              display: flex;
              justify-content: space-between;
              margin-bottom: 14px;
              font-size: 18px;
              color: #626262;

              >div {
                display: flex;
                align-items: center;
                cursor: pointer;
                user-select: none;

                .icon {
                  color: var(--theme-color);
                  margin-left: 2px;
                  transition: all .3s;
                  position: relative;
                  top: 3px;

                  &.open {
                    top: 0px;
                    transform: rotate(90deg);
                  }
                }
              }
            }

            .content-main {
              background-color: #F7F7F7;
              font-size: 20px;
              font-weight: 400;
              color: #333333;
              padding: 28px;

              :deep(.el-col) {
                align-items: center;
              }

              :deep(.el-rate) {
                .el-rate__icon {
                  font-size: 25px;
                }
              }

              .beizhu {
                font-size: 18px;
                font-weight: 500;
                color: #6E6E6E;
                margin: 17px 0 4px;
              }

              .ques-group {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 20px;

                .ques-title {
                  width: 66%;
                }

                .mark-rate {
                  width: 32%;
                }

                .ques-opinion {
                  border-radius: 6px;
                  background-color: #fff;
                  min-height: 60px;
                  padding: 10px;
                  font-size: 16px;
                }
              }
            }
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.qr-code {
  width: 100%;
  display: flex;
  justify-content: center;

  img {
    width: 80%;
    aspect-ratio: 1;
  }
}
</style>